<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>草稿</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./CSS/bootstrap.min.css">
    <style>
        body{
            width: 100%;
            height: 100%;
        }
        * {
				margin: 0;
				padding: 0;
			}
			
			ul li {
				list-style: none;
				float: left;
				margin-left: 60px;
				line-height: 60px;
			}
			
			a {
				text-decoration: none;
				color: rgb(229, 35, 61);
			}
			
			ul li a:hover {
				color: orange;
				text-decoration: none;
			}
			.ok{
				height: 36px;
         background-color: #863c13;
			}
			.j{
				
              font-size: 20px;
        float: left;
         margin-left:500px;
          height: 36px;
			}
			.center{
				width: 1200px;
              height: 36px;
              margin: 0 auto;
              line-height: 36px;
			}
			.hhh{
				color: rgb(236, 242, 232);
               font-size: 19px;
			   line-height: 35px;
                 float: right;
			}
			.hhh a{
				color: #f4ecec;
                margin: 0 5px;
                 font-size: 18px;
			}

    </style>
</head>
<body>

  <div class="container-fluid px-0">
    <div class="ok">
        <div class="center">
            <div class="j" style="color: rgb(230, 237, 237);">
                <b>校园失物招领系统</b>


            </div>
            <div class="hhh">

                <a href="denglu.html">登录</a>
                <a href="zhuce.html">免费注册</a>
                <a href="#">购物车</a>
                <a href="#">我的订单</a>

            </div>

        </div>
    </div>

    <div class="w-100  d-flex justify-content-center"
        style="height: 60px;background-color:#1d1d22;min-width: 800px;">
        <div class="" style="color: white;">
            <ul class="">
                <li>
                    <a href="gui.html">首页</a>
                </li>
                <li>
                    <a href="fxx_GGXX.html">公告信息</a>
                </li>
                <li>
                    <a href="shiwu1.html">失物信息</a>
                </li>
                <li>
                    <a href="zhaoling1.html">招领信息</a>
                </li>
                <li>
                    <a href="demo00.html">交流论坛</a>
                </li>
                <li>
                    <a href="liuyan.html">留言反馈</a>
                </li>
                <li>
                    <a href="personal.html">个人中心</a>
                </li>
                <li>
                    <a href="./后台/index.html">后台管理</a>
                </li>

            </ul>

        </div>

    </div>
</div>


<!-- ==============================boostrap轮播图 ========================================================-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2000"> 
  <!-- 这是下方图片跳转选项 填几个转第几个【索引】-->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>

  <!-- 轮播的图片   -->
  <div class="carousel-inner">
    <div class="carousel-item active ">
      <img src="./img/001.jpg" class="d-block w-100" height="200px" alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/002.jpg" class="d-block w-100" height="200px"alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/003.jpg" class="d-block w-100" height="200px"alt="...">
    </div>
  </div>

  <!-- 左右的上下跳转 -->
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>
<!-- ======= 轮播图 --end-- ==================================================================-->

<div class="fxx_img" style="width: 100%;">
  <div style="margin:0 16%;">
    <h5>校园失物招领系统真的很有必要</h5>
    <img src="./img/0066.jpg" style=" width:60%;" height="" alt="">

    <div class="jllt_pl w-100" style="border-radius: 3px; margin: 10px 0; min-height: 50px;background-color: #eeeeee;">
      <span style="font-weight: 700;color: #858585;margin-left: 5px; line-height: 50px; ">评论列表</span>
      <!-- <button type="button" class="btn" style="box-shadow: 2px 3px 3px #454648; margin-left: 81.5%; font-weight: 900; background-color: #7f4e16;color: white;">＋ 点击评论</button> -->

      <!-- Button trigger modal -->
      <button type="button" class="btn" style="box-shadow: 2px 3px 3px #454648; margin-left: 81.5%; font-weight: 900; background-color: #7f4e16;color: white;" data-toggle="modal" data-target="#exampleModal">
        添加评论
      </button>

      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">添加评论</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p style="display: inline;">评论</p>
              <textarea class="form-control" aria-label="With textarea" cols="20" rows="4" style="width: 90%;"></textarea>
            </div>
            <div style="margin-left: 25%; margin-bottom: 40px;">
              <button type="button" class="btn" style="background-color: #7f4e16;color: white;">立刻提交</button>
              <button type="button" class="btn" style="background-color: #454545;color: white;">重置</button>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>
    



</body>
</html>